<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>论文去重</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.45/vue.global.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/element-plus/2.2.28/index.css" rel="stylesheet" />


    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.2.5/axios.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/element-plus/2.2.28/index.full.js"></script>

    <style>
        .github-corner:hover .octo-arm {
            animation: octocat-wave 560ms ease-in-out
        }

        @keyframes octocat-wave {

            0%,
            100% {
                transform: rotate(0)
            }

            20%,
            60% {
                transform: rotate(-25deg)
            }

            40%,
            80% {
                transform: rotate(10deg)
            }
        }

        @media (max-width:500px) {
            .github-corner:hover .octo-arm {
                animation: none
            }

            .github-corner .octo-arm {
                animation: octocat-wave 560ms ease-in-out
            }
        }

        .el-header {
            background: var(--el-color-black);
            color: aliceblue;
        }

        .slider-block {
            display: flex;
            align-items: center;
        }

        .slider-block .el-slider {
            margin-top: 0;
            margin-left: 12px;
        }

        .slider-block .slider-laber {
            font-size: 14px;
            color: var(--el-text-color-secondary);
            line-height: 44px;
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            margin-bottom: 0;
        }

        .slider-block .slider-laber+.el-slider {
            flex: 0 0 70%;
        }

        body {
            margin: 0 !important;
            height: 100%;
        }
         .el-table {

        }
        ::v-deep .element.style {
            width: 100% !important;
        }
    </style>

</head>

<body>
<a href="https://gitee.com/zhangmouren159/baidu-translate" class="github-corner" aria-label="View source on GitHub"><svg
        width="80" height="80" viewBox="0 0 250 250"
        style="fill:#70B7FD; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true">
    <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
    <path
            d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
            fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
    <path
            d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
            fill="currentColor" class="octo-body"></path>
</svg></a>
<div id="hello-vue">

    <el-container>
        <el-header>
            <h1>论文去重 </h1>
        </el-header>
        <el-main>
            <el-row :gutter="40">

                <el-col :span="24" class="col-params" v-loading="loading" element-loading-text="Loading..."
                        :element-loading-spinner="svg" element-loading-svg-view-box="-10, -10, 50, 50"
                        element-loading-background="rgba(122, 122, 122, 0.8)">

                    <el-collapse v-mode="activeNames" @change="handleChange">
                        <el-collapse-item title="去重等级查看" name="1" >
                            <el-table
                                    :data="tableData">
                                <el-table-column
                                        prop="level"
                                        label="去重等级"
                                        >
                                </el-table-column>
                                <el-table-column
                                        prop="content"
                                        label="去重原理"
                                        >
                                </el-table-column>
                            </el-table>
                        </el-collapse-item>
                        <el-collapse-item title="去重原理" name="2">
                            <el-card class="box-card">
                                <div>通过不断地在多种语言之间翻译，最终翻回中文。</div>
                                <div>由于各国语言习惯不同，最终翻译出来的文字，在进行简单调整之后，就达到去重的效果。</div>
                            </el-card>
                        </el-collapse-item>
                    </el-collapse>

                    <h4>等级选择</h4>

                    <el-select v-model="model" class="m-2" placeholder="Model" size="large">
                        <el-option v-for="item in models" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>

                    <h2>原文</h2>
                    <el-form>
                        <el-input type="textarea" v-model="prompt" placeholder="QUERY_CONTENT" rows="10"></el-input>
                    </el-form>

                    <el-button size="large" type="success" @click="submitForm">发送</el-button>

                    <h2>结果</h2>
                    <el-form>
                        <el-input type="textarea" v-model="response" placeholder="RESPONSE_CONTENT" rows="10"></el-input>
                    </el-form>
                </el-col>

            </el-row>
        </el-main>
    </el-container>
</div>

<script>
    const HelloVueApp = {
        data() {
            return {
                activeNames : ['2'],
                tableData:[
                    {level : "初级",content : "中->英->德->中"},
                    {level : "中级",content : "中->英->德->日->葡萄牙->中"},
                    {level : "高级",content : "中->英->德->日->葡萄牙->意大利->波兰->保加利亚->爱沙尼亚->中"}
                ],
                loading: false,
                key: '',
                value : '',
                prompt: '',
                model: '2',
                models: [
                    {value:"1",label:"初级"},
                    {value:"2",label:"中级"},
                    {value:"3",label:"高级"}
                ],
                response: '',

            }
        },
        methods: {

            submitForm() {



                let data = {
                    query : this.prompt,
                    type : this.model
                }

                this.loading = true

                axios.post('http://localhost:8899/api/trans', data, {
                    headers: {
                        'Content-Type': 'application/json'
                    }
                })
                    .then(res => {
                        console.log(res)
                        this.loading = false
                        if(res.data.code == 200){
                            this.response = res.data.msg;
                        }else{
                            this.$alert(res.data.msg, '错误', {
                                confirmButtonText: '确定',
                                type: 'error',
                            });
                        }
                    })
                    .catch(error => {
                        this.$alert(error, '错误', {
                            confirmButtonText: '确定',
                            type: 'error',
                        });
                        this.loading = false
                    });
            }
        }
    }

    Vue.createApp(HelloVueApp).use(ElementPlus).mount('#hello-vue')
</script>
</body>

</html>